<template>
  <view>
    <view class="xy-modal-box bottom-fixed xy-modal-box-bottom buy-model-box ovh" :class="[buyModelShow?'xy-modal-show':'']">
      <view class="title p-tb-35 tb tc m-b-20">{{title}}</view>
      <view class="flex p-30 lh-50 bg-w">
        <view class="l">金额</view>
        <view class="r tb m-l-auto">¥{{payfee}}</view>
      </view>

      <view class="pay-list">
        <view class="flex p-30 m-b-2 lh-40 bg-w" v-for="(item, index) in payList" :key="index" v-if="item.state" @tap="payMethodSelect(index)">
          <view class="l flex">
            <text :class="'yz-iconfont yz-'+item.icon+' ts-40 m-r-15'" :style="'color:'+item.color"></text>
            <text class="lh-40">{{item.name}}</text>
          </view>
          <view class="r tb m-l-auto">
            <text class="yz-iconfont yz-gouxuan ts-32 lh-40 tm1" v-if="item.select"></text>
            <text class="yz-iconfont yz-yuanxingweixuanzhong ts-32 lh-40 tc-g" v-else></text>
          </view>
        </view>
      </view>

      <view class="flex p-30 m-t-20 m-b-2 lh-50 bg-w">
        <view class="agree flex " @tap="isAgree=!isAgree">
          <text class="xyicon icon-radio-a ts-30 flex tb" v-if="isAgree"></text>
          <text class="xyicon icon-radio ts-30 flex tb" v-else></text>
          <text class="m-l-10">同意</text>
        </view>
        <text class="tm" @tap="$xyfun.to('/pages/article/other?type=privacy')">《用户协议》</text>
      </view>
      <view class="flex p-30 bg-w">
        <view class="l flex p-t-25"><text>共计：</text><text>¥{{payfee}}</text></view>
        <view class="r m-l-auto pay_confirm tc tc-w" @tap="createOrder">确认支付</view>
      </view>
    </view>
    <view class="xy-modal-mask" :class="[buyModelShow?'xy-mask-show':'']" @tap="buyModelShow =!buyModelShow"></view>
  </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
  name: 'payPop',
  props: {
    title: {
      type : String,
      default(){
        return '订单详情'
      }
    }
  },
  data() {
    return {
      payfee: 0,
      vipIndex:0,
      buyModelShow:false,
      isAgree:true,
      disabled: false,
      payList:[{
        name: '微信支付',
        method: 'wechat',
        icon: 'wechat',
        state: true,
        color: '#3cb034',
        select: true
      }
      ]
    }
  },
  computed: {
    ...mapState(['common'])
  },
  created() {
    if(this.common.customConfig.balance_on==1){
      this.payList.push({
        name: '余额支付',
        method: 'balance',
        icon: 'balance',
        state: true,
        color: '#fe9c01',
        select: false
      })
    }
  },
  methods: {
    showDiaLog(money){
      this.payfee = money;
      this.buyModelShow = true
    },
    //支付方式选择
    payMethodSelect(key){
      this.payList.map((value,index) => {
        if(index == key){
          value.select = !value.select;
        }else{
          value.select = false;
        }
      });
    },
    createOrder(){
      if(this.isAgree){
        if (this.disabled) {
          return;
        }
        this.disabled = true;
        var pay_type = '';
        this.payList.map((value) => {
          if(value.select){
            pay_type = value.method;
          }
        });
        if (!pay_type) {
          this.$xyfun.msg('请选择支付方式');
        }else{
          this.$emit('createOrder',pay_type);
        }
      }else{
        this.$xyfun.msg('请同意用户协议');
      }
    }
  }
}
</script>
<style scoped lang="scss">
.pay_confirm{
  background: $theme2;
  padding: 0 50rpx;
  height: 60rpx;
  font-size: 28rpx;
  color: #fff;
  border-radius: 40rpx;
  line-height: 60rpx;
}
</style>